<template>
    <div class="dashboard-container">
      <div style="display: flex; flex-direction: row;">
        <el-upload ref="upload" action="/upload" :multiple="false" :limit="1" :before-upload="beforeUpload">
          <el-button slot="trigger" size="middle" type="primary">上传excel</el-button>
        </el-upload>
        <div style="width: 20px;"></div>
        <el-button size="middle" type="primary" @click="onExcuteClick" v-loading="isExcuting">执行</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
        <el-table-column prop="id" label="ID" width="120">
        </el-table-column>
        <el-table-column prop="game_id" label="唯一表示" width="140">
        </el-table-column>
        <el-table-column prop="access_token" label="Token" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="score" label="积分" width="200">
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import * as XLSX from 'xlsx';
  const axios = require('axios');
  export default {
    name: 'Dashboard',
    data() {
      return {
        isLoading: false,
        tableData: [],
        isExcuting: false
      }
    },
    mounted() {
      this.isLoading = true
      this.request({
        url: '/api/blum/accounts',
        method: 'get',
      }).then(resp => {
        const data = resp.data;
        this.tableData = data
      }).finally(() => {
        this.isLoading = false
      })
  
      this.refreshExcuteStatus()
      this.timer = setInterval(() => {
        this.refreshExcuteStatus()
      }, 1000 * 60);
    },
    destroyed() {
      clearInterval(this.timer)
    },
    methods: {
      refreshExcuteStatus() {
        this.request({
          url: '/api/blum/excute',
          method: 'get',
        }).then(resp => {
          this.isExcuting = resp.data
        })
      },
      readFile(file) {
        //文件读取
        return new Promise(resolve => {
          let reader = new FileReader();
          reader.readAsBinaryString(file); //以二进制的方式读取
          reader.onload = ev => {
            resolve(ev.target.result);
          };
        });
      },
      async createWalletFile(file) {
        let data = await this.readFile(file);
        let workbook = XLSX.read(data, { type: "binary", cellDates: true }); //解析二进制格式数据
        let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
        let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
        return result
      },
      async beforeUpload(file) {
        let result = await this.createWalletFile(file)
        for (let index = 0; index < result.length; index++) {
          const element = result[index];
          let params = element.params;
          if (params == null || params.length == 0) {
            continue
          }
          if (params.startsWith('src=')) {
            params = params.split("#tgWebAppData=")[1]
            params = params.split("&tgWebAppVersion")[0]
            params = decodeURIComponent(params)
            element.params = params
          }
        }
        this.submitTableData(result)
        return false
      },
      submitTableData(tableData) {
        this.isLoading = true
        this.request({
          url: '/api/blum/setup',
          method: 'post',
          data: tableData
        }).then((resp) => {
          const data = resp.data;
          this.tableData = data
        }).finally(() => {
          this.isLoading = false
        });
      },
      async onExcuteClick() {
        this.request({
          url: '/api/blum/excute',
          method: 'post',
        }).then(resp => {
          this.isExcuting = resp.data
        })
      }
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
  
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  